<template>
	<view>
		<view v-for="(item,index) in customerList" class="list-item" :style="{animationDelay:gets(index)}">
			<view>
				<view class="customerCard" @click="clickCustomer(item,index)" :style="getColor(item.color)">
					<view class="img2">
						<!-- <vab-icon class="vab-icon sexicon" :icon="['fas', item.student.sex==1?'mars':'mars-stroke']"
						:style="{color:item.student.sex==1?'#0057ff':'#ff0070'}"></vab-icon> -->
						<image :src="getimg(item.student)"
							:style="{borderStyle:' ',borderColor:item.student.sex==1?'#0057ff':'#ff0070',borderWidth:'4rpx',borderRadius:'50%'}">
						</image>
					</view>
					<view class="customerInfo">
						<view class="top">
							<view class="name">
								<view class="vip" v-if="item.isVip==1">
									VIP
								</view>
								<view style="color: #f3a73f;margin-right: 20rpx;">
									{{item.level}}<uni-icons style="color: #f3a73f;" type="star-filled"></uni-icons>
								</view>
								{{item.student.name}}


							</view>
						</view>
						<view class="bottom font-12">
							<view class="phone " style="color: #7e7e7e;">
								{{item.parentsInfo.phone}}&nbsp;&nbsp;|&nbsp;&nbsp;
								{{dateToAge(item.student.dateOfBirth)}}&nbsp;&nbsp;|&nbsp;&nbsp;
								{{item.sourcetitle}}
							</view>
							<view style="color: #7e7e7e;font-size: 20rpx;margin-top: 2rpx;">
								创建时间:&nbsp;&nbsp;{{item.createTime.split(" ")[0]}}
							</view>
							<view class="age " style="font-size: 20rpx;margin-top: 8rpx;"
								v-if="item.axCommunicationRecordModel!=null&&item.axCommunicationRecordModel.length>0">
								{{item.axCommunicationRecordModel[0].content}}
								<!-- <text v-for="(item2,index) in item.axCommunicationRecordModel" :key="index">
								{{index+1}}:{{ item2.content }}----
							</text> -->
							</view>
						</view>
					</view>
					<view class="customercaozuo juzhong" style="width: 60rpx;display: block;">
						<view
							style="height: 60rpx;display: flex;align-items: center;border-radius: 50%;padding: 2rpx;width: 60rpx;"
							class=" bg-blue juzhong ">
							<vab-icon @tap.stop="call(item)" :icon="['fas', 'phone']"
								:style="{color:'#fff'}"></vab-icon>
						</view>
						<view
							style="height: 60rpx;display: flex;align-items: center;border-radius: 50%;padding: 6rpx;width: 60rpx;"
							class="padding bg-blue juzhong margin-top-sm">
							<vab-icon @tap.stop="addCommunication(item.id)" :icon="['fas', 'comment-dots']"
								:style="{color:'#fff'}"></vab-icon>
						</view>

					</view>
				</view>

			</view>

		</view>

		<blues-empty text="请先搜索客户" img="msg" class="margin-top-sm" v-if="customerList.length==0">
		</blues-empty>
		<addCommunication @refresh="init" ref="addCommunication"></addCommunication>
		<customerInfo @refresh="init" ref="customerInfo"></customerInfo>
	</view>
</template>

<script>
	import addCommunication from '@/pages/marketing/communication/addCommunication.vue'
	import customerInfo from '@/pages/marketing/customer/customerInfo.vue'
	import {
		pictureProcessing,
		getColorByCode

	} from '@/utils/common.js'
	import {
		getListByParentOrStudent
	} from '@/api/customer/index.js'
	import storage from '@/utils/storage'
	import {
		dateToAge
	} from '@/utils/validate'

	import {
		isNull
	} from '@/utils/validate'
	export default {
		components: {
			customerInfo,
			addCommunication
		},
		data() {
			return {

			}
		},
		props: {
			customerList: {
				type: Array,
				default: []
			},
			clickNo: {
				type: Boolean,
				default: false
			},

		},
		mounted() {

		},
		onLoad() {
			this.init()
		},

		methods: {
			call(data) {
				//打开沟通记录的弹框,然后拨号
				uni.makePhoneCall({
					phoneNumber: data.parentsInfo.phone, // 替换为你要拨打的电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(error) {
						console.log('拨打电话失败：' + error.errMsg);
					}
				});

			},
			gets(index) {
				if (index < 10) {
					return index * 0.2 + 's'
				} else {
					return (index % 10 + 1) * 0.2 + 's'
				}

			},
			getimg(data) {
				return pictureProcessing(data)
			},

			init() {
				//查询合同信息
			},

			/**
			 * 根据code获取颜色代码
			 * @param {Object} code
			 */
			getColor(code) {
				return {
					background: getColorByCode(code)
				}
			},
			dateToAge(date) {
				return dateToAge(date)
			},

			/**
			 * 点击客户
			 * @param {Object} data
			 */
			clickCustomer(data) {
				this.$emit('clickCustomer', data)
				if (this.clickNo) {
					return
				}
				this.$refs["customerInfo"].open(data);
			},
			addCommunication(customerId) {
				this.$refs["addCommunication"].open(customerId);
			},
		}
	}
</script>

<style lang="scss">
	/* 定义动画关键帧 */
	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 应用动画到列表项 */
	/* 应用动画到列表项 */
	.list-item {
		opacity: 0;
		animation: fadeIn 0.5s ease forwards;
	}

	uni-image {
		width: 120rpx;
		height: 120rpx;
	}

	.customerInfoPopup {
		background-color: #f5f6f7;
		margin-bottom: 100rpx;
		padding: 20rpx;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}

	.content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 50px;

		.body {

			padding: 20rpx;
			// margin-bottom: 200rpx;

			.customerList {
				margin-top: 20rpx;

				.text {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					margin: 10rpx 0;
				}


			}
		}
	}

	.customerCard {
		border-radius: $uni-border-radius-lg;
		// height: 140rpx;
		padding: 20rpx;

		background-image: linear-gradient(to left, #fff, #ddf9ff);
		margin: 0px 20rpx;
		margin-bottom: 20rpx;
		display: flex;

		.img2 {
			flex: 1;
			width: 140rpx;
			height: 140rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.img3 {
			flex: 5;
			width: 300rpx;
			height: 300rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.customerInfo {
			padding: 10rpx;
			flex: 5;
			color: $uni-color-title;
			display: block;

			.top {
				display: flex;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					display: flex;

					.vip {
						margin-right: 10rpx;
						color: #f3a73f;
						font-weight: bold;
						// border: 1px solid #f3a73f;
						padding: 0px 5px;
					}

				}


			}


			.bottom {
				.phone {
					margin-top: 10rpx;
					color: #8f8f8f;

				}

				.sex {
					color: #8f8f8f;
				}

				.age {
					// margin-left: 10rpx;
					color: #8f8f8f;
				}


			}
		}
	}
</style>